<!--新建剪辑 ——弹框-->
<template>
  <ele-modal
    width="700px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="新建剪辑"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="剪辑名称" prop="title">
        <el-input
          clearable
          :maxlength="20"
          v-model="form.title"
          placeholder="请输入剪辑名称"
        />
      </el-form-item>
      <el-form-item label="关联素材" prop="projectFolderId">
        <div class="flex">
          <!--filterable:是否可搜索-->
          <el-select
            allow-create
            default-first-option
            ref="nameSel"
            v-model="form.projectFolderId"
            placeholder="请选择关联商家素材库，点击生成成片，系统自动保存成片结果"
            class="sel-border"
            clearable
            @change="changeFile"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="primary" class="v-new-btn" @click="newFileClick(true)">
            新建
          </el-button></div>
      </el-form-item>
      <el-form-item label="台本" prop="projectType" v-show="form.type == 1">
        <el-radio-group v-model="form.projectType" @input="scriptClick">
          <el-radio :label="2">导入台本</el-radio>
          <el-radio :label="1">手动输入</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择台本" prop="scriptId" v-if="form.type != 2 && form.projectType == 2">
        <el-select
          v-model="form.scriptId"
          placeholder="请选择台本"
          class="ele-block"
          clearable
        >
          <el-option
            v-for="item in allTxt"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="剪辑模式" prop="type">
        <el-radio-group v-model="form.type" class="padding" @input="clipClick">
          <!--            1 * 1脚本剪辑 =AI剪辑 * 2自定义剪辑=口播剪辑 * 3图文剪辑-->
          <el-radio :label="1">AI剪辑
            <div class="v-hint">使用自建或推荐的脚本，分布完成靓片</div>
          </el-radio>
          <el-radio :label="2">口播剪辑
            <div class="v-hint">自设场景组合，自由度超高
            </div>
          </el-radio>
          <el-radio :label="3">图文剪辑
            <div class="v-hint">纯图片剪辑，可以直接生成D音图文哦</div>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择比例" prop="scaleId" style="margin-top: 50px">
        <el-row :gutter="20">
          <el-col :span="10" v-for="(item,index) in radioList" :key="index">
            <div class="flex-column" style="cursor: pointer" @click="slecet(item.scaleType)" :class="form.scaleId == (index + 1) ?'d-radio-bj':'d-radio-bj2' ">
              <div :class="item.classname">
                <div class="d-title flex">{{item.title}}</div>
                <div class="d-radio flex">{{item.scaleCode}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-row class="flex-end">
        <el-button class="v-cancel" @click="updateVisible(false)">取消</el-button>
        <el-button class="v-define" @click="createProject()">
          开始剪辑
        </el-button>
      </el-row>
    </el-form>
    <!-- 新建文件夹 -->
    <ele-modal
      width="660px"
      :visible="newShow"
      :append-to-body="true"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      title="新建文件夹"
      @update:visible="newFileClick"
    >
      <el-form ref="formFile" :model="formFile" :rules="rulesFile" label-width="130px">
        <el-form-item label="文件夹名称:" prop="fileName">
          <el-input
            clearable
            :maxlength="20"
            v-model="formFile.fileName"
            placeholder="请输入文件夹名称"
          />
        </el-form-item>
        <el-form-item label="公共文件夹:">
          <el-radio-group v-model="formFile.isCommon">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="newFileClick(false)">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">
          创 建
        </el-button>
      </template>
    </ele-modal>
  </ele-modal>
</template>

<script>
  import {createScriptProject, diyCreate, imageCreate} from "@/api/creatCenter/authoringClips";
  import {addUserFile, getTxtAll, listUserFiles} from "@/api/creatCenter/material";
  export default {
    name: "new-list",
    props: {
      // 弹窗是否打开
      visible: Boolean,
      //关联活动文件夹list
      dataList:Array,
      //比例
      radioList:Array,
    },
    data() {
      return {
        // 是否新建文件夹
        newShow:false,
        txtId:'',
        username:this.$store.state.user.info.username,
        //当前文件夹下的所有台本
        allTxt:[],
        // 表单数据
        form: {
          title: '',
          projectFolderId:'',
          projectType: 2,
          scriptId:'',
          type:1,
          scaleId: 1
        },
        // 新建文件夹
        formFile: {
          fileName: '',
          isCommon: 0
        },
        rulesFile: {
          fileName: [
            {
              required: true,
              message: '请输入剪辑名称',
              trigger: 'blur'
            }
          ]
        },
        // 表单验证规则
        rules: {
          title: [
            {
              required: true,
              message: '请输入剪辑名称',
              trigger: 'blur'
            }
          ],
          projectFolderId: [
            {
              required: true,
              message: '请选择关联商家素材库，点击生成成片，系统自动保存成片结果',
              trigger: 'blur'
            }
          ],
          scriptId: [
            {
              required: true,
              message: '请选择台本',
              trigger: 'blur'
            }
          ],
          type: [
            {
              required: true,
              message: '请选择剪辑模式',
              trigger: 'blur'
            }
          ],
          scaleId: [
            {
              required: true,
              message: '请选择比例',
              trigger: 'blur'
            }
          ]
        },
        // 提交状态
        loading: false,
        // 文件夹名称
        dataListName:[],
      }
    },
    created(){
      // sessionStorage.setItem('projectType323', 1564)// 存储 “剪辑工程type”(测试)
      console.log('新建剪辑dataList', this.dataList)
    },
    methods: {
      // 新建文件夹
      save(){
        this.$refs.formFile.validate((valid) => {
          if (!valid) {
            return false;
          }
          addUserFile({
            username: this.$store.state.user.info.username,
            // 根目录
            parentId: 0,
            // 0 ：文件夹
            type: 0,
            name: this.formFile.fileName,
            isCommon: this.formFile.isCommon,
          })
            .then((msg) => {
              this.loading = false;
              this.$emit('query');
              this.$emit('done');
              console.log("成功", msg)
              this.$message.success(msg);
              this.newFileClick(false);
            })
            .catch((e) => {
              console.log("失败e", e)
              this.loading = false;
              this.$message.error(e);
            });
        });
      },
      // 是否新建文件夹
      newFileClick(e){
        this.newShow=e
      },
      // 选择台本 单选框
      scriptClick(e){
        console.log("选择台本 单选框scriptClick======",e,this.form.scriptId)
        if(this.form.scriptId){
          this.form.scriptId=''
        }
      },
      //选择文件夹 （并筛选台本数据）
      changeFile(e){
        //e为文件夹id
        console.log("选择文件夹e=====",e)
        if(!e){
          this.allTxt=[]  // 清空
          this.form.scriptId=''
          return
        }
        this.query(e)
      },
      async query(e) {
        this.allTxt=[]  // 清空
        console.log("e====",e)
        //用户所创建的文件
        let userData = await listUserFiles({
          name:this.search,
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.username,
          //父级目录：初次传0
          parentId: e
        })
        console.log(userData)
        //筛选台本文件夹
        userData=userData.filter(item => {
          return item.type == 3;
        });
        console.log("userData222222222",userData)
        for(let i=0;i<userData.length;i++) {
          let alltb = []  //台本
          //根据条件获取所有文件
          alltb = await getTxtAll({
            folderId: userData[i].id,
            username: this.username
          })
          // 判断台本是否包含媒资id（mediaId），不包含则过滤
          console.log('alltb1111======', alltb)
          alltb=alltb.filter((i)=>{
            return i.mediaId
          })
          console.log('alltb222-====',alltb)
          this.allTxt.push(...alltb)
          // this.allTxt
          console.log('this.allTxt=33333333333======', this.allTxt)
        }
      },
      // 剪辑模式切换时调用
      clipClick(e){
        console.log("e=====",e)
        if(e===3){
          this.form.projectType=1
        }
        if(e===2){
          this.form.projectType=''
        }
        if(e===1){
          this.form.projectType=2
        }
      },
      //选择比例
      slecet(index){
        this.form.scaleId=index
      },
      /* 更新 visible */
      updateVisible(value) {
        this.form = {
          title: '',
          projectType:2,
          projectFolderId:'',
          scriptId:'',
          type:1,
          scaleId: 1
        },

          this.allTxt=[]  // 清空
          this.$emit('update:visible', value);
      },
      //开始剪辑
      createProject(){
        this.dataListName=this.dataList.filter(item =>{
          return item.id == this.form.projectFolderId;
        })
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          console.log('this.form.type',this.form.type,'this.form.projectType==2',this.form.projectType==2)
          if(this.form.type !== 2 && this.form.projectType==2){
            let txtItem=[];
            //获取下拉框 台本txt 名称
            txtItem=this.allTxt.filter(item => {
              return item.id == this.scriptId;
            });
            console.log("txtItem",txtItem)
            // 当媒资台本存在媒资ID则为音频导入(2)，当不存在，则为文本台本导入(3)
            this.form.projectType= txtItem.length>0 && txtItem[0].mediaId?2:3
          }
          // form.clipMode 2 自定义剪辑 1,3 脚本/图文剪辑
          console.log('this.form.clipMode',this.form.clipMode)
          let params = {}
          console.log('this.radioList', this.radioList, 'this.form.scaleId', this.form)
          let scale = this.radioList.find(e => this.form.scaleId == e.scaleType)
          // 如果是图文剪辑，则只能手动输入（projectType=1）
          if(this.form.type == 3){
            this.form.projectType=1
          }
          Object.assign(params, this.form, {
            username:this.username,
            projectFolderName: this.dataListName[0].name,
            'outWidth': scale.width,
            'outHeight': scale.height
          })
          this.projectCreate(params)
          // 1脚本剪辑 * 2自定义剪辑 * 3图文剪辑
          // this.form.type == 1 ? this.scriptCreate(params) : this.form.type == 2 ? this.diyCreates(params) :  this.imageCreates(params)
        });
      },
      projectCreate(params){
        // 1脚本剪辑 * 2自定义剪辑 * 3图文剪辑
        let apiName = this.form.type == 1 ? createScriptProject : this.form.type == 2 ? diyCreate : imageCreate
        apiName(params)
          .then((data) => {
            this.$emit('query');
            this.$emit('done');
            // this.$message.success(data.msg);
            this.handleEdit(data.data.id,this.form.type)
            this.updateVisible(false)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      handleEdit(id, type) {
        sessionStorage.setItem('form', location.href)
        // 需修改域名   // mode: 'history'_去掉vue路由中的#
        let url = 'http://localhost:8081/#/'
        var host =window.location.host;
        // let url = 'https://'+host+'/montage/index.html#/'
        console.log('剪辑url=========',url)



        // let url = 'https://dsptt.admin168.net/montage/index.html#/'
        if (type === 1) {
          url = `${url}scriptIndex?id=${id}&type=${type}`
        }
        if (type == 2) {
          url = `${url}diy?id=${id}&type=${type}`
        }
        if (type == 3) {
          url = `${url}textEdit?id=${id}&type=${type}`
        }
        console.log("当前剪辑工程路径location.href",location.href,'路径===', url + '&from=' + location.href)
        window.open(url + '&from=' + location.href)
        // window.open(url + '&from=' + location.href, "_blank")

      },
      /*暂未使用*/
      // 脚本/图文创建
      scriptCreate(params){
        createScriptProject(params)
          .then((data) => {
            this.$message.success(data.msg);
            this.updateVisible(false)
            // this.list=data.data.list;
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },
      diyCreates(params){
        diyCreate(params)
          .then((data) => {
            this.$message.success(data.msg);
            this.updateVisible(false)
            // this.list=data.data.list;
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },
      imageCreates(params){
        imageCreate(params)
          .then((data) => {
            this.$message.success(data.msg);
            this.updateVisible(false)
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      },



    }
  }
</script>

<style scoped >
  /deep/  .el-form-item__label {
    padding: 0 32px 0 0;
  }
  .file-name-classs{
    width: 80%;
  }
  .resetting-btn{
    background: #F5F5F5;
  }
  .flex-align-center {
    display: flex;
    align-items: center;
  }
  .flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .flex-end{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
  }
  .flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .v-new-btn{
    width: 58px;
    height: 36px;
    background: #1E6CEB;
    border-radius: 0px 2px 2px 0px;
    padding: 0;
  }

  .d-radio-bj,.d-radio-bj2{
    margin-top: -40px;
    width: 120px;
    height: 79px;
    border-radius: 5px;
    /* width: 79px;
     height: 120px;
     transform: rotate(-90deg)*/
  }
  .d-radio-bj{
    background: #DDF0FF;
    border: 1px solid #0D91F3;
  }
  .d-radio-bj2{
    background: #F5F5F5;
    border: 1px solid #F5F5F5;
  }
  .d-bj{
    background: linear-gradient(180deg, #1E6CEB 0%, #0C91F3 99.99%, #0078D5 100%);
    height: 65px;
    width: 48px;
    /*height: 48px;
    width: 65px;*/
  }
  .d-bj2{
    background: linear-gradient(180deg, #1E6CEB 0%, #0C91F3 99.99%, #0078D5 100%);
    height: 65px;
    width: 88px;
    /*height: 88px;
    width: 65px;*/
  }
  .d-title,.d-radio{
    z-index: 99;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 17px;
    margin-top: 10px;
  }
  .d-radio{
    margin-top: 10px;
  }
  .padding{
    padding-top: 10px
  }
  .flex{
    display: flex;

  }
  .el-select{
    width: 500px;
  }
  .v-hint{
    white-space:normal;
    word-wrap:break-word;
    display: flex;
    flex-wrap: wrap;
    width: 145px;
    line-height: 17px;
    color: #757575;
    font-size: 14px;
    margin: 22px 0;
  }
  .v-cancel,.v-define{
    width: 137px;
    height: 46px; border-radius: 2px;
  }
  .v-cancel{
    border: 1px solid #D9D9D9;
    color: #757575;
    margin-right: 20px;
  }
  .v-define{
    background: linear-gradient(180deg, #0E8FF3 0%, #1D6FEC 100%);
    color: #FFFFFF;
  }
</style>
